<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>猫咪摆钟</title>
  <style>
    *,
    *:after,
    *:before {
      box-sizing: border-box;
    }
    :root {
      --hue: 320;
      --white: #f2f2f2;
      --black: #404040;
      --aspect-ratio: calc(300 / 800);
      --unit: calc((80 / 800) * 1vmin);
      --width: calc(300 * var(--unit));
      --height: calc(800 * var(--unit));
    }
    svg {
      width: 30vmin;
      height: 80vmin;
      position: fixed;
      top: 50%;
    }
    svg:nth-of-type(1) {
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0.15;
    }
    svg:nth-of-type(2) {
      right: 0;
      height: 800px;
      width: 300px;
      transform: translate(0, -50%);
    }
    body {
      min-height: 100vh;
      background: var(--black);
      display: flex;
      align-items: center;
      justify-content: center;
      transform-origin: top center;
    }
    .clock {
      height: calc(var(--height));
      width: calc(var(--width));
      position: relative;
    }
    .clock__eye {
      --size: 134;
      height: calc(var(--size) * var(--unit));
      width: calc(var(--size) * var(--unit));
      background: var(--white);
      position: absolute;
      top: calc(17 * var(--unit));
      border-radius: 50%;
      border: calc(6 * var(--unit)) solid var(--black);
      left: 50%;
    }
    .clock__eye:after {
      content: '';
      height: 110%;
      width: 110%;
      border: calc(4 * var(--unit)) solid var(--white);
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-clip-path: polygon(50% 50%, 94% 0, 6% 0);
      clip-path: polygon(50% 50%, 94% 0, 6% 0);
    }
    .clock__eye--left {
      transform: translate(-100%, 0%);
    }
    .clock__eye--left:after {
      transform: translate(-50%, -60%);
    }
    .clock__eye--right {
      transform: translate(0%, 0%);
    }
    .clock__eye--right:after {
      transform: translate(-50%, -60%);
    }
    .clock__body {
      --size: 200;
      background: var(--white);
      height: calc(var(--size) * var(--unit));
      width: calc(var(--size) * var(--unit));
      position: absolute;
      top: 46%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
    }
    .clock__body:after {
      --size: calc(25 * var(--unit));
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      border-radius: 50%;
      background: var(--black);
      height: var(--size);
      width: var(--size);
      transform: translate(-50%, -50%);
    }
    .clock__dot {
      --size: 10;
      --radius: 90;
      height: calc(var(--size) * var(--unit));
      width: calc(var(--size) * var(--unit));
      background: var(--black);
      border-radius: 50%;
      top: 50%;
      left: 50%;
      position: absolute;
      transform: translate(-50%, -50%) rotate(
              calc(((360 / 12) * var(--index)) * 1deg)
      )
      translate(0, calc(var(--radius) * var(--unit)));
    }
    .clock__paw {
      --height: 70;
      --width: 80;
      position: absolute;
      height: calc(var(--height) * var(--unit));
      width: calc(var(--width) * var(--unit));
    }
    .clock__paw--top-left {
      top: calc(238 * var(--unit));
      left: 0;
    }
    .clock__paw--bottom-left {
      top: calc(448 * var(--unit));
      left: 0;
    }
    .clock__paw--top-right {
      top: calc(238 * var(--unit));
      right: 0;
    }
    .clock__paw--bottom-right {
      top: calc(448 * var(--unit));
      right: 0;
    }
    .clock__pad {
      --size: calc(20 * var(--unit));
      height: var(--size);
      width: var(--size);
      background: var(--white);
      position: absolute;
      border-radius: 50%;
    }
    .clock__pad:nth-of-type(1) {
      left: 0%;
      top: 20%;
    }
    .clock__pad:nth-of-type(2) {
      left: 24%;
      top: 0%;
    }
    .clock__pad:nth-of-type(3) {
      left: 52%;
      top: 0%;
    }
    .clock__pad:nth-of-type(4) {
      right: 0%;
      top: 20%;
    }
    .clock__pad:nth-of-type(5) {
      --size: calc(50 * var(--unit));
      bottom: 0%;
      left: 50%;
      transform: translate(-50%, 0);
    }
    .clock__face {
      background: var(--white);
      position: absolute;
      top: calc(136 * var(--unit));
      left: calc(20 * var(--unit));
      height: calc(90 * var(--unit));
      width: calc(260 * var(--unit));
      border-radius: 0 0 50% 50%/0 0 100% 100%;
    }
    .clock__nose {
      background: var(--black);
      position: absolute;
      height: calc(45 * var(--unit));
      width: calc(70 * var(--unit));
      top: calc(115 * var(--unit));
      border-radius: 50%;
      left: 50%;
      transform: translate(-50%, 0);
    }
    .clock__mouth {
      position: absolute;
      height: calc(60 * var(--unit));
      width: calc(110 * var(--unit));
      background: var(--black);
      border-radius: 50%;
      bottom: calc(5 * var(--unit));
      left: 50%;
      transform: translate(-50%, 0);
    }
    .clock__mouth:before,
    .clock__mouth:after {
      content: '';
      position: absolute;
      top: 0;
      height: 50%;
      width: 55%;
      background: var(--white);
    }
    .clock__mouth:before {
      right: 49%;
      border-radius: 0 0 40% 35%;
    }
    .clock__mouth:after {
      left: 49%;
      border-radius: 0 0 35% 40%;
    }
    .clock__tongue {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 50%;
      position: relative;
    }
    .clock__tongue:before {
      content: '';
      position: absolute;
      bottom: 0;
      height: 40%;
      width: 50%;
      background: #f42525;
      border-radius: 50%;
      left: 50%;
      transform: translate(-45%, 50%);
    }
    .clock__whiskers {
      height: 100%;
      width: 100%;
      position: relative;
    }
    .clock__whisker {
      background: var(--black);
      height: calc(5 * var(--unit));
      width: calc(70 * var(--unit));
      position: absolute;
      left: 50%;
      top: 50%;
    }
    .clock__whisker:nth-of-type(1) {
      transform-origin: right;
      transform: translate(-160%, -550%) rotate(-5deg);
    }
    .clock__whisker:nth-of-type(2) {
      transform-origin: right;
      width: calc(56 * var(--unit));
      transform: translate(-160%, -350%) rotate(-15deg);
    }
    .clock__whisker:nth-of-type(3) {
      transform-origin: left;
      transform: translate(60%, -550%) rotate(5deg);
    }
    .clock__whisker:nth-of-type(4) {
      transform-origin: left;
      width: calc(56 * var(--unit));
      transform: translate(60%, -350%) rotate(15deg);
    }
    .clock__tail {
      --swing: 38;
      width: calc(140 * var(--unit));
      height: calc(280 * var(--unit));
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 0);
      transform-origin: top center;
      -webkit-animation: swing 1s infinite alternate ease-in-out;
      animation: swing 1s infinite alternate ease-in-out;
    }
    .clock__tail:after {
      content: '';
      background: var(--white);
      position: absolute;
      height: calc(70 * var(--unit));
      width: calc(50 * var(--unit));
      bottom: 0;
      left: 50%;
      transform-origin: bottom left;
      transform: translate(-18%, 0) rotate(-30deg);
      border-radius: 0 0 50% 50%/0 0 50% 50%;
      -webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
      clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
    }
    @-webkit-keyframes swing {
      from {
        transform: translate(-50%, 0) rotate(calc(var(--swing) * -1deg));
      }
      to {
        transform: translate(-50%, 0) rotate(calc(var(--swing) * 1deg));
      }
    }
    @keyframes swing {
      from {
        transform: translate(-50%, 0) rotate(calc(var(--swing) * -1deg));
      }
      to {
        transform: translate(-50%, 0) rotate(calc(var(--swing) * 1deg));
      }
    }
    .clock__pupil {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 92%;
      width: 15%;
      transform: translate(-50%, -50%);
      -webkit-animation: shift 1s infinite alternate ease-in-out;
      animation: shift 1s infinite alternate ease-in-out;
    }
    .clock__pupil:before {
      content: '';
      height: 100%;
      width: 100%;
      background: var(--black);
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-animation: scale 0.5s infinite ease-in-out alternate;
      animation: scale 0.5s infinite ease-in-out alternate;
    }
    @-webkit-keyframes scale {
      0% {
        transform: translate(-50%, -50%) scale(0.6);
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
      }
    }
    @keyframes scale {
      0% {
        transform: translate(-50%, -50%) scale(0.6);
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
      }
    }
    @-webkit-keyframes shift {
      0% {
        transform: translate(-50%, -50%) translate(-250%, 0);
      }
      100% {
        transform: translate(-50%, -50%) translate(250%, 0);
      }
    }
    @keyframes shift {
      0% {
        transform: translate(-50%, -50%) translate(-250%, 0);
      }
      100% {
        transform: translate(-50%, -50%) translate(250%, 0);
      }
    }
    .clock__bowtie {
      --size: calc(20 * var(--unit));
      border-radius: 50%;
      position: absolute;
      background: hsl(var(--hue), 60%, 60%);
      left: 50%;
      top: calc(236 * var(--unit));
      transform: translate(-50%, 0);
      height: var(--size);
      width: var(--size);
    }
    .clock__bowtie:after,
    .clock__bowtie:before {
      content: '';
      position: absolute;
      height: 160%;
      width: 160%;
      background: hsl(var(--hue), 60%, 60%);
      top: 50%;
      transform: translate(0, -50%) rotate(calc(var(--rotate, 0) * 1deg));
      -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
      clip-path: polygon(0 0, 100% 50%, 0 100%);
    }
    .clock__bowtie:after {
      --rotate: 180;
      left: 15%;
    }
    .clock__bowtie:before {
      right: 15%;
    }
    .clock__hand {
      position: absolute;
      width: calc(5 * var(--unit));
      background: var(--black);
      border-radius: calc(2 * var(--unit)) calc(2 * var(--unit)) 0 0;
      top: 50%;
      left: 50%;
      transform-origin: bottom center;
    }
    .clock__hand:before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 0);
      width: calc(12 * var(--unit));
      height: 80%;
      background: var(--black);
      -webkit-clip-path: polygon(50% 0, 100% 20%, 75% 100%, 25% 100%, 0 20%);
      clip-path: polygon(50% 0, 100% 20%, 75% 100%, 25% 100%, 0 20%);
    }
    .clock__hand--minutes {
      --seconds: 3600;
      height: 40%;
      transform: translate(-50%, -100%) rotate(0deg);
      -webkit-animation: time calc(var(--seconds) * 1s) calc(
              var(--minutes-delay, 0) * -1s
      )
      infinite linear;
      animation: time calc(var(--seconds) * 1s) calc(
              var(--minutes-delay, 0) * -1s
      )
      infinite linear;
    }
    .clock__hand--hours {
      --seconds: 43200;
      height: 35%;
      transform: translate(-50%, -100%) rotate(270deg);
      -webkit-animation: time calc(var(--seconds) * 1s) calc(
              var(--hours-delay) * -1s
      )
      infinite linear;
      animation: time calc(var(--seconds) * 1s) calc(var(--hours-delay) * -1s)
      infinite linear;
    }
    @-webkit-keyframes time {
      0% {
        transform: translate(-50%, -100%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -100%) rotate(360deg);
      }
    }
    @keyframes time {
      0% {
        transform: translate(-50%, -100%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -100%) rotate(360deg);
      }
    }
  </style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="clock">
  <div class="clock__face">
    <div class="clock__mouth">
      <div class="clock__tongue"></div>
    </div>
    <div class="clock__whiskers">
      <div class="clock__whisker"></div>
      <div class="clock__whisker"></div>
      <div class="clock__whisker"></div>
      <div class="clock__whisker"></div>
    </div>
  </div>
  <div class="clock__eyes">
    <div class="clock__eye clock__eye--left">
      <div class="clock__pupil"></div>
    </div>
    <div class="clock__eye clock__eye--right">
      <div class="clock__pupil"></div>
    </div>
  </div>
  <div class="clock__nose"></div>
  <div class="clock__body">
    <div class="clock__dot" style="--index: 0"></div>
    <div class="clock__dot" style="--index: 1"></div>
    <div class="clock__dot" style="--index: 2"></div>
    <div class="clock__dot" style="--index: 3"></div>
    <div class="clock__dot" style="--index: 4"></div>
    <div class="clock__dot" style="--index: 5"></div>
    <div class="clock__dot" style="--index: 6"></div>
    <div class="clock__dot" style="--index: 7"></div>
    <div class="clock__dot" style="--index: 8"></div>
    <div class="clock__dot" style="--index: 9"></div>
    <div class="clock__dot" style="--index: 10"></div>
    <div class="clock__dot" style="--index: 11"></div>
    <div class="clock__hand clock__hand--minutes"></div>
    <div class="clock__hand clock__hand--hours"></div>
  </div>
  <div class="clock__paw clock__paw--top-left">
    <div class="clock__pad"></div>
    <div class="clock__pad"></div>
    <div class="clock__pad"></div>
    <div class="clock__pad"></div>
    <div class="clock__pad"></div>
  </div>
  <div class="clock__paw clock__paw--top-right">
    <div class="clock__pad"></div>
    <div class="clock__pad"></div>
    <div class="clock__pad"></div>
    <div class="clock__pad"></div>
    <div class="clock__pad"></div>
  </div>
  <div class="clock__paw clock__paw--bottom-left">
    <div class="clock__pad"></div>
    <div class="clock__pad"></div>
    <div class="clock__pad"></div>
    <div class="clock__pad"></div>
    <div class="clock__pad"></div>
  </div>
  <div class="clock__paw clock__paw--bottom-right">
    <div class="clock__pad"></div>
    <div class="clock__pad"></div>
    <div class="clock__pad"></div>
    <div class="clock__pad"></div>
    <div class="clock__pad"></div>
  </div>
  <div class="clock__tail"></div>
  <div class="clock__bowtie"></div>
</div>
<script>
  const CLOCK = document.querySelector('.clock');
  const DATE = new Date();
  const MINUTES = DATE.getMinutes();
  const HOURS = DATE.getHours() % 12;

  CLOCK.style.setProperty('--hue', Math.random() * 360);
  CLOCK.style.setProperty('--minutes-delay', (3600 / 60) * MINUTES);
  CLOCK.style.setProperty(
          '--hours-delay',
          (43200 / 12) * HOURS + (43200 / 12 / 60) * MINUTES
  );
</script>
</body>
</html>
